<template>
  <el-dialog title="编辑" :close-on-click-modal="false"  :visible.sync="show"  class="dialog_index" :before-close="cancle">
    <el-form   label="right" :rules="rules" :model="form" ref="editForm" v-loading="loading" >
      <el-form-item label="菜单/按钮：" prop="is_menu">
        <el-radio v-model="form.is_menu" label="1">菜单</el-radio>
        <el-radio v-model="form.is_menu" label="0">按钮</el-radio>
      </el-form-item>
      <el-form-item label="父级菜单：" prop="pid">
        <el-select v-model="form.pid" filterable placeholder="父级菜单（必填项）" clearable @focus="getMenuTreeList ">
          <el-option v-for="item in ruleTreeList" :key="item.id" :value="item.id" :label="item.name" v-html="item.pre_name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="菜单名称：" prop="name">
        <el-input v-model="form.name" placeholder="菜单名称（必填项）" clearable></el-input>
      </el-form-item>
       <el-form-item label="菜单描述：" prop="remark">
        <el-input v-model="form.remark" placeholder="菜单描述（非必填项）" clearable></el-input>
      </el-form-item>
       <el-form-item label="路径：" prop="path">
        <el-input v-model="form.path" placeholder="路径（必填项）" clearable></el-input>
      </el-form-item>
       <el-form-item label="顺序：" prop="weigh">
        <el-input v-model="form.weigh" placeholder="顺序（必填项）" clearable></el-input>
      </el-form-item>
       <el-form-item label="图标: " prop="icon" class="iconItem">
        <el-input v-model="form.icon" placeholder="图标（必填项）" clearable></el-input>
        <el-popover placement="top-start"  trigger="click">
          <div class="iconList">
            <i :class=" item === form.icon ? 'active iconfont ' + item : 'iconfont ' + item " v-for="item in iconList" :key="item" @click="setIcon(item)"></i>
          </div>
          <el-button  slot="reference" class="el-button--search" >选择图标</el-button>
        </el-popover>
        
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="search" @click="submitForm">保存</el-button>
      <el-button @click="cancle">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { menuRuleTreeList, menuEditGet, menuEditPost } from '@/api/manage/menu.js'

export default {
 props: {
    show: Boolean,
    closeAddDialog:Function,
    id: Number
  },
  data() {
    return {
      form:{
        is_menu: "1",
        pid: "",
        remark: '',
        name: '',
        path: "",
        weigh: ""
      },
      // 字段xx为必填项！
      rules:{
        is_menu:[
          { required: true, message: '菜单/按钮为必填项', trigger: 'blur' },
        ],
        pid:[
          { required: true, message: '父级菜单为必填项', trigger: 'blur' },
        ],
        name:[
          { required: true, message: '菜单名称为必填项', trigger: 'blur' },
          { min: 1, max: 20, message: '菜单名称最多20字符', trigger: 'blur' }
        ],
        remark:[
          { min: 1, max: 50, message: '菜单描述最多50字符', trigger: 'blur' }
        ],
        path:[
          { required: true, message: '路径为必填项', trigger: 'blur' },
          { min: 1, max: 100, message: '路径最多100字符', trigger: 'blur' }
        ],
        weigh:[
          { required: true, message: '顺序为必填项', trigger: 'blur' },
          { min: 1, max: 2, message: '顺序最多2字符', trigger: 'blur' }
        ],
        icon:[
           { required: true, message: '图标为必填项', trigger: 'blur' },
        ]
      },
      ruleTreeList: [],
      loading: false,
      iconList: ['icon-Menu_normal', 'icon-Home_normal', 'icon-Product_acitved', 'icon-Article_normal', 
      'icon-history_actived', 'icon-news_normal', 'icon-member_normal', 'icon-coupon_normal', 'icon-card_normal',
      'icon-artificial_normal', 'icon-QR_normal', 'icon-shop_normal', 'icon-gallery_normal', 'icon-attestation_actived',
      'icon-compile_actived', 'icon-check_normal', 'icon-see_normal', 'icon-list_normal', 'icon-share_normal','icon-front-end_actived','icon-Role_normal', 'icon-Kanban_normal']
    }
  },
  watch:{
    show:function(){
      if(this.show) {
        this.getMenuTreeList()
        this.getMenuItem()
      }
    }
  },
  methods: {
    getMenuItem(){
      this.loading = true
      let params = {
        id : this.id
      }
      menuEditGet(params).then(res=>{
        console.log(res)
        res.data.is_menu = res.data.is_menu.toString()
        res.data.weigh = res.data.weigh.toString()
        this.form = res.data
        this.loading = false
      })
    },
    getMenuTreeList(){
      menuRuleTreeList().then(res=>{
        if (res.state == 1){
          let array = [{
            haschild: 1,
            id: 0,
            is_menu: 1,
            name: "无",
            path: "/",
            pid: 0,
            pre_name: "无",
            spacer: "",
          }]
          this.ruleTreeList = array.concat(res.data.rows) 
        }
      })
    },
    cancle(){
      this.$emit('closeDialog')
      this.$refs.editForm.clearValidate();
    },
    submitForm(){
      this.$refs.editForm.validate((valid) => {
        if (valid) {
           if(this.iconList.indexOf(this.form.icon) > -1){
            this.editMenuPost()
          }else {
            this.$message.error('请选择对应的图标')
          }
        } else {
          return false;
        }
      });
    },
    editMenuPost(){
      console.log('editMenuPost')
      menuEditPost(this.form).then(res=>{
        console.log(res)
        if(res.state == 1){
          this.$message.success('编辑菜单成功')
          this.cancle()
        }
      })
    },
    setIcon(icon){
      this.form.icon = icon
    }
  }
}
</script>

<style lang="scss">
.iconItem{
  .el-input{
    width: calc(100% - 88px);
  }
  button{
      width: 72px;
      padding: 08px;
      margin-left: 16px;
  }
}
.iconList{
  height: 115px;
  width: 250px;
  >i{
    margin: 0 24px 16px;
    display: inline-block;
    width: 14px;
    height: 14px;
    color: #808080;
    cursor: pointer;
    &.active{
      color: black;
    }
    &:nth-of-type(7n){
      margin-right: 0;
    }
    &:nth-of-type(n){
      margin-left: 1px;
    }
  }
}
</style>